<template>
	<view>
		<view class="from">
			<view class="from-item">
				<view class="from-item-label">
					<text>收货人</text>
				</view>
				<view class="from-item-input">
					<input type="text" v-model="addressData.name" placeholder="请输入">
				</view>
			</view>
			<view class="from-item">
				<view class="from-item-label">
					<text>手机号码</text>
				</view>
				<view class="from-item-input">
					<input type="number" v-model="addressData.phone" placeholder="请输入">
				</view>
			</view>
			<view class="from-item">
				<view class="from-item-label">
					<text>所在地区</text>
				</view>
				<view class="from-item-area" @click="btnClick">
					<text style="color: #9A958F;" v-if="addressData.province_id == ''">请选择</text>
					<text else>{{addressData.province_name}}{{addressData.city_name}}{{addressData.area_name}}</text>
					<image src="../static/shop/icon-right.png" mode=""></image>
				</view>
			</view>
			<view class="from-item">
				<view class="from-item-label">
					<text>详细地址</text>
				</view>
				<view class="from-item-input">
					<input type="text" v-model="addressData.address" placeholder="小区、楼栋、门牌号">
				</view>
			</view>
		</view>
		
		<view class="from u-m-t-20">
			<view class="from-item" style="border: 0;">
				<view class="from-item-label">
					<text>设为默认</text>
				</view>
				<view class="from-item-area">
					<u-switch v-model="addressData.default" active-color="#D3A358"></u-switch>
				</view>
			</view>
		</view>
		
		<view class="m-bottom">
			<view class="m-btn" v-if="manageType == 'add'" @click="confirm">
				<text>提交</text>
			</view>
			
			<block v-else>
				<view class="m-bottom-btn"  @click="delAddress">
					<text>删除</text>
				</view>
				<view class="m-bottom-btn m-bottom-btn__extend" @click="confirm">
					<text>保存</text>
				</view>
			</block>
		</view>
		
		<region :is_show="is_show_region" @cancel="cancel" @confirm="confirm_region"></region> 
	</view>
</template>

<script>
	import region from "../components/region/region.vue"
	export default {
		components:{
			region
		},
		data() {
			return {
				manageType: 'add',
				is_show_region: false,
				
				addressData: {
					id: 0,
					name: '',
					phone: '',
					province_id: '',
					province_name: '',
					city_id: '',
					city_name: '',
					area_id: '',
					area_name: '',
					address: '',
					default: true,
					if_default: 1,
					moren:1
				}
			}
		},
		onLoad(option) {
			if (option.type === 'edit') {
				this.get_info(option.id)
				uni.setNavigationBarTitle({
					title:'编辑收货地址'
				})
			}else{ 
				uni.setNavigationBarTitle({
					title:'新增收货地址'
				})
			}
			this.manageType = option.type || 'add';
			console.log(this.addressData);
		},
		methods: {
			get_info(id){
				this.$http.getJson('userAddress_detail',{id:id}).then(res=>{
					let data = res.data
					data.id = id
					if(data.if_default == 1){
						data.default = true
					}else{
						data.default = false
					}
					this.addressData = data
				})
			},
			confirm_region(e){
				console.log(e);
				this.addressData.province_name = e.name[0]
				this.addressData.city_name = e.name[1]
				this.addressData.area_name = e.name[2]
				
				this.addressData.province_id = e.id[0]
				this.addressData.city_id = e.id[1]
				this.addressData.area_id = e.id[2]
				this.is_show_region = false
			},
			cancel(){
				this.is_show_region = false
			},
			btnClick(){
				this.is_show_region = true
			},
			switchChange(e) {
				console.log(e)
				this.addressData.default = e.detail.value;
				if (e.detail.value) {
					this.addressData.moren = 1;
				} else {
					this.addressData.moren = 0;
				}
			},
			//提交
			confirm() {
				let data = this.addressData;
				if (!data.name) {
					uni.showToast({
						title:'请填写收货人姓名',
						icon:'none'
					});
					return;
				}
				if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(data.phone)) {
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					});
					return;
				}
				if (data.province_id === '') {
					uni.showToast({
						title:'请选择省市区',
						icon:'none'
					});
					return;
				}
				if (data.address === '') {
					uni.showToast({
						title:'请填街道',
						icon:'none'
					});
					return;
				}
				uni.showLoading({
					title:'提交中。。。',
					mask:'true'
				})
				this.$http.getJson('userAddress_add', data).then((res) => {
					let title = res.message || '操作成功'
					uni.showToast({
						title:title
					})
					setTimeout(() => {
						this.to_back()
					}, 800)
				})
			},
			delAddress(){
				uni.showModal({
					title:'提示',
					content:'确认删除?',
					success: async (res) => {
						if(res.confirm){
							let result = await this.$http.getJson('userAddress_delete',{id:this.addressData.id})
							if(result.code == 1){
								uni.removeStorageSync('order_address');
								let title = res.message || '操作成功'
								uni.showToast({
									title:title
								})
								setTimeout(() => {
									this.to_back()
								}, 800)
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f5f5f5;
}
.from{
	background: #fff;
	padding: 0 25rpx;
	.from-item{
		display: flex;
		align-items: center;
		min-height: 108rpx;
		padding: 10rpx 0;
		background: #FFFFFF;
		border-bottom: 1px solid #E6E3DE;
		.from-item-label{
			width: 156rpx;
			font-size: 28rpx;
			color: #34302D;
			font-weight: 600;
		}
		.from-item-input{
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #34302D;
			input{
				width: 100%;
				height: 100%;
			}
		}
		.from-item-area{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #34302D;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.m-bottom{
	position: fixed;
	bottom: 100rpx;
	width: 750rpx;
	display: flex;
	justify-content: center;
	.m-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 702rpx;
		height: 104rpx;
		background: #D3A358;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 32rpx;
		color: #fff;
	}
	.m-bottom-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 341rpx;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #E6E2DE;
	}
	.m-bottom-btn__extend{
		background: #D3A358;
		border-color: #D3A358;
		color: #fff;
		margin-left: 20rpx;
	}
}
</style>
